<html ng-app='expanderModule'>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="../jsLib/angular.js"></script>

</head>
<body>
<div ng-controller='SomeController'>
    <input type="text" ng-model="title">
    <expander class='expander' expander-itle='title.name'>
        {{text}}
    </expander>
</div>
</body>
<script>
    var expanderModule=angular.module('expanderModule', [])
    expanderModule.directive('expander', function() {
        return {
            restrict : 'EA',
            replace : true,
            transclude : true,
            scope : {
                titl : '=expanderItle'
            },
            template : '<div>'
            + '<div class="title" ng-click="toggle()">{{titl}}</div>'
            + '<div class="body" ng-show="showMe" ng-transclude></div>'
            + '</div>',
            link : function(scope, element, attrs) {
                scope.showMe = false;
                scope.toggle = function toggle() {
                    scope.showMe = !scope.showMe;
                }
            }
        }
    });
    expanderModule.controller('SomeController',function($scope) {
        $scope.title={}
        $scope.title.name = '点击展开';
        $scope.text = '这里是内部的内容。';
    });
</script>
</html>